<template>
    <button ref="button" :disabled="disabled"
        :style="{ '--animation': animation, '--color': color, '--font-size': size, '--bg-color': bgColor }"
        :class="{ [shape]: true, 'hovering-border': hoveringBorder }" @click="giveClickForChildren">
        <slot></slot>
    </button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ButtonOptions } from '@/types/ui';
const {
    color, disabled,
    size = "1em", bgColor = "#ccc", shape = "round-rect",
    hoveringBorder, expandClick, animation = "none"
} = defineProps<ButtonOptions>()
const button = ref();
function giveClickForChildren(e: PointerEvent) {
    const buttonEle: HTMLElement = button.value;
    if (!expandClick || e.target !== buttonEle) return;
    buttonEle.querySelectorAll<HTMLElement>(":scope>*").forEach(child => child.click())
}
</script>

<style scoped>
button {
    --padding-height: calc(var(--font-size) / 5);
    --padding-width: calc(var(--font-size) / 2);
    --half-height: calc(var(--font-size) / 2 + var(--padding-height));
    color: var(--color);
    transition: 0.1s;
    background-image: repeating-linear-gradient(45deg,
            var(--bg-color) 0 1px,
            color-mix(in srgb, var(--bg-color) 85%, #fff) 1px 2px);
    background-color: var(--bg-color);
    font-size: var(--font-size);
    border-top: calc(var(--font-size) / 20) solid color-mix(in srgb, var(--bg-color) 60%, yellow);
    border-bottom: calc(var(--font-size) / 20) solid color-mix(in srgb, var(--bg-color) 60%, yellow);
    border-left: none;
    border-right: none;
    filter: blur(0.5px);
    box-shadow: 1px;
    animation: var(--animation);
}

button:disabled {
    filter: grayscale(100%);
    cursor: not-allowed;
}

button.chosen:not(:disabled),
button:hover:not(:disabled) {
    cursor: pointer;
    filter: blur(0);
    text-shadow: 0 0 14px rgba(230, 198, 140, 0.5);
}

button.hovering-border:not(:hover) {
    border-color: transparent;
}

button.ellipse {
    border-radius: 50%;
    padding: var(--padding-height) var(--padding-width);
}

button.round-rect {
    border-radius: calc(7 * var(--font-size) / 10);
    padding: var(--padding-height) var(--padding-width);
}

/* 用于单字 */
button.circle {
    border-radius: 50%;
    padding: var(--padding-height) var(--padding-height);
}

button.hexagon {
    clip-path: polygon(0 50%,
            calc(var(--half-height)) 0,
            calc(100% - var(--half-height)) 0,
            100% 50%,
            calc(100% - var(--half-height)) 100%,
            calc(var(--half-height)) 100%);
    padding: var(--padding-height) var(--padding-width);
}

button * {
    font-size: var(--font-size);
}
</style>